<template>
  <form-item-setting v-model:config="config">
    <a-form-item
      field="defaultValue"
      tooltip=""
      label="默认值"
      :allow-clear="true"
    >
      <a-slider
        v-model="config.config.defaultValue"
        :step="config.config.step"
        :min="config.config.min"
        :max="config.config.max"
        :range="config.config.range"
        show-tooltip
      />
    </a-form-item>
    <a-form-item
      field="direction"
      tooltip=""
      label="布局"
    >
      <a-radio-group v-model="config.config.direction" type="button">
        <a-radio value="horizontal">水平</a-radio>
        <a-radio value="vertical">垂直</a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item
      field="min"
      tooltip=""
      label="最小值"
    >
      <a-input-number
        v-model="config.config.min"
        mode="button"
        allow-clear
        :max="99999"
        :min="0"
      />
    </a-form-item>
    <a-form-item
      field="max"
      tooltip=""
      label="最大值"
    >
      <a-input-number
        v-model="config.config.max"
        mode="button"
        allow-clear
        :max="99999"
        :min="0"
      />
    </a-form-item>
    <a-form-item
      field="step"
      tooltip=""
      label="滑动步长"
    >
      <a-input-number
        v-model="config.config.step"
        mode="button"
        allow-clear
        :max="99999"
        :min="0"
      />
    </a-form-item>
    <a-form-item
      field="showTicks"
      tooltip=""
      label="显示刻度线"
    >
      <a-switch
        v-model="config.config.showTicks"
        type="round"
      >
        <template #checked>显示</template>
        <template #unchecked>隐藏</template>
      </a-switch>
    </a-form-item>
    <a-form-item
      field="showInput"
      tooltip=""
      label="显示输入框"
    >
      <a-switch
        v-model="config.config.showInput"
        type="round"
      >
        <template #checked>显示</template>
        <template #unchecked>隐藏</template>
      </a-switch>
    </a-form-item>
    <a-form-item
      field="range"
      tooltip=""
      label="开启范围选择"
    >
      <a-switch
        v-model="config.config.range"
        type="round"
        @change="config.config.defaultValue = ''"
      >
        <template #checked>开启</template>
        <template #unchecked>不开启</template>
      </a-switch>
    </a-form-item>
    <a-form-item
      field="showTooltip"
      tooltip=""
      label="显示tooltip"
    >
      <a-switch
        v-model="config.config.showTooltip"
        type="round"
      >
        <template #checked>显示</template>
        <template #unchecked>隐藏</template>
      </a-switch>
    </a-form-item>
    <a-form-item
      field="marks"
      tooltip=""
      label="选项数据"
    >
      <a-button
        type="primary"
        shape="round"
        @click="editMarks"
      >
        <template #icon>
          <icon-edit />
        </template>
        编辑数据
      </a-button>
      <code-editor
        ref="editMarksRef"
        v-model:code="config.config.marks"
      />
    </a-form-item>
    <a-divider style="border-bottom-style: dotted" orientation="center" :size="2" :margin="0">
      事件设置
    </a-divider>
    <br />
    <a-form-item
      field="onChangeFunction"
      tooltip=""
      label="Change"
    >
      <a-button
        type="primary"
        shape="round"
        @click="editOnChange"
      >
        <template #icon>
          <icon-edit />
        </template>
        编辑事件
      </a-button>
      <code-editor
        ref="codeEditorRef"
        v-model:code="config.config.onChangeFunction"
      />
    </a-form-item>
  </form-item-setting>
</template>

<script lang="ts" setup>
import { ref, defineModel } from 'vue';
import FormItemSetting from '@/components/form-design/item-setting/form-item-setting.vue';
import CodeEditor from '@/components/code-editor/index.vue';

const config = defineModel('config');

const codeEditorRef = ref();

const editMarksRef = ref();

const editOnChange = () => {
  codeEditorRef.value.open();
};

const editMarks = () => {
  editMarksRef.value.open();
};

</script>

<script lang="ts">
export default {
  name: 'ItemSettingSlider'
};
</script>

<style scoped>

</style>